<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品管理</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .product-card {
            background: rgba(255, 255, 255, 0.95);
            transition: all 0.3s ease;
        }
        .product-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        .season-high {
            background: linear-gradient(135deg, #ef4444, #dc2626);
        }
        .season-low {
            background: linear-gradient(135deg, #10b981, #059669);
        }
        .season-normal {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
        }
        .commission-card {
            background: rgba(255, 255, 255, 0.98);
        }
        .upload-area {
            border: 2px dashed #d1d5db;
            transition: all 0.3s ease;
        }
        .upload-area:hover {
            border-color: #6366f1;
            background-color: #f8fafc;
        }
        .upload-area.dragover {
            border-color: #4f46e5;
            background-color: #eef2ff;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-4 py-2 bg-black text-white text-sm">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <i class="fas fa-battery-three-quarters"></i>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="px-4 py-6">
        <!-- 头部 -->
        <div class="flex items-center justify-between mb-6">
            <button class="text-white" onclick="history.back()">
                <i class="fas fa-arrow-left text-xl"></i>
            </button>
            <h1 class="text-xl font-bold text-white">产品管理</h1>
            <button class="text-white" onclick="showUploadForm()">
                <i class="fas fa-plus text-xl"></i>
            </button>
        </div>

        <!-- 快速统计 -->
        <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="glass-card rounded-xl p-4 text-center">
                <div class="text-2xl font-bold text-white">156</div>
                <div class="text-white text-opacity-80 text-sm">总产品数</div>
            </div>
            <div class="glass-card rounded-xl p-4 text-center">
                <div class="text-2xl font-bold text-green-300">89</div>
                <div class="text-white text-opacity-80 text-sm">上架产品</div>
            </div>
        </div>

        <!-- 功能导航 -->
        <div class="grid grid-cols-4 gap-3 mb-6">
            <button class="glass-card rounded-xl p-3 text-center text-white" onclick="showUploadForm()">
                <i class="fas fa-upload text-2xl mb-2"></i>
                <div class="text-sm">上传产品</div>
            </button>
            <button class="glass-card rounded-xl p-3 text-center text-white" onclick="showCommissionSettings()">
                <i class="fas fa-percentage text-2xl mb-2"></i>
                <div class="text-sm">佣金设置</div>
            </button>
            <button class="glass-card rounded-xl p-3 text-center text-white" onclick="showSeasonSettings()">
                <i class="fas fa-calendar-alt text-2xl mb-2"></i>
                <div class="text-sm">淡旺季</div>
            </button>
            <button class="glass-card rounded-xl p-3 text-center text-white" onclick="showProductList()">
                <i class="fas fa-list text-2xl mb-2"></i>
                <div class="text-sm">产品列表</div>
            </button>
        </div>

        <!-- 淡旺季区间设置 -->
        <div class="mb-6">
            <h2 class="text-lg font-bold text-white mb-3">淡旺季区间设置</h2>
            <div class="space-y-3">
                <!-- 旺季 -->
                <div class="commission-card rounded-xl p-4">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center">
                            <div class="season-high text-white px-3 py-1 rounded-full text-sm font-medium mr-3">
                                旺季
                            </div>
                            <span class="font-semibold text-gray-800">高峰期间</span>
                        </div>
                        <button class="text-blue-600" onclick="editSeason('high')">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-2 gap-4 text-sm text-gray-600">
                        <div>
                            <span class="font-medium">时间段：</span>
                            <span>7月-8月，10月-11月</span>
                        </div>
                        <div>
                            <span class="font-medium">价格倍数：</span>
                            <span class="text-red-600 font-bold">1.5x</span>
                        </div>
                        <div>
                            <span class="font-medium">成交员佣金：</span>
                            <span class="text-green-600 font-bold">8%</span>
                        </div>
                        <div>
                            <span class="font-medium">分销员佣金：</span>
                            <span class="text-blue-600 font-bold">12%</span>
                        </div>
                    </div>
                </div>

                <!-- 平季 -->
                <div class="commission-card rounded-xl p-4">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center">
                            <div class="season-normal text-white px-3 py-1 rounded-full text-sm font-medium mr-3">
                                平季
                            </div>
                            <span class="font-semibold text-gray-800">正常期间</span>
                        </div>
                        <button class="text-blue-600" onclick="editSeason('normal')">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-2 gap-4 text-sm text-gray-600">
                        <div>
                            <span class="font-medium">时间段：</span>
                            <span>4月-6月，9月</span>
                        </div>
                        <div>
                            <span class="font-medium">价格倍数：</span>
                            <span class="text-blue-600 font-bold">1.0x</span>
                        </div>
                        <div>
                            <span class="font-medium">成交员佣金：</span>
                            <span class="text-green-600 font-bold">6%</span>
                        </div>
                        <div>
                            <span class="font-medium">分销员佣金：</span>
                            <span class="text-blue-600 font-bold">10%</span>
                        </div>
                    </div>
                </div>

                <!-- 淡季 -->
                <div class="commission-card rounded-xl p-4">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center">
                            <div class="season-low text-white px-3 py-1 rounded-full text-sm font-medium mr-3">
                                淡季
                            </div>
                            <span class="font-semibold text-gray-800">优惠期间</span>
                        </div>
                        <button class="text-blue-600" onclick="editSeason('low')">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-2 gap-4 text-sm text-gray-600">
                        <div>
                            <span class="font-medium">时间段：</span>
                            <span>12月-3月</span>
                        </div>
                        <div>
                            <span class="font-medium">价格倍数：</span>
                            <span class="text-green-600 font-bold">0.8x</span>
                        </div>
                        <div>
                            <span class="font-medium">成交员佣金：</span>
                            <span class="text-green-600 font-bold">5%</span>
                        </div>
                        <div>
                            <span class="font-medium">分销员佣金：</span>
                            <span class="text-blue-600 font-bold">8%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最新产品 -->
        <div class="mb-6">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-lg font-bold text-white">最新产品</h2>
                <button class="text-white text-sm" onclick="showProductList()">
                    查看全部 <i class="fas fa-chevron-right ml-1"></i>
                </button>
            </div>
            
            <div class="space-y-4">
                <!-- 产品卡片1 -->
                <div class="product-card rounded-xl p-4">
                    <div class="flex items-center mb-3">
                        <img src="https://via.placeholder.com/80x80/4F46E5/FFFFFF?text=九寨沟" alt="九寨沟三日游" class="w-20 h-20 rounded-lg mr-4">
                        <div class="flex-1">
                            <div class="font-semibold text-gray-800 mb-1">九寨沟三日游</div>
                            <div class="text-sm text-gray-500 mb-2">包含：住宿+门票+导游</div>
                            <div class="flex items-center space-x-4">
                                <span class="text-lg font-bold text-red-600">¥1,299</span>
                                <span class="text-sm text-gray-400 line-through">¥1,599</span>
                                <span class="season-high text-white px-2 py-1 rounded text-xs">旺季</span>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div class="text-center bg-green-50 rounded-lg p-2">
                            <div class="text-green-600 font-bold">成交员佣金</div>
                            <div class="text-green-800">8% (¥103.92)</div>
                        </div>
                        <div class="text-center bg-blue-50 rounded-lg p-2">
                            <div class="text-blue-600 font-bold">分销员佣金</div>
                            <div class="text-blue-800">12% (¥155.88)</div>
                        </div>
                    </div>
                    <div class="flex space-x-2 mt-3">
                        <button class="flex-1 bg-blue-500 text-white py-2 rounded-lg text-sm" onclick="editProduct('九寨沟三日游')">
                            <i class="fas fa-edit mr-1"></i>编辑
                        </button>
                        <button class="flex-1 bg-green-500 text-white py-2 rounded-lg text-sm" onclick="viewStats('九寨沟三日游')">
                            <i class="fas fa-chart-line mr-1"></i>数据
                        </button>
                    </div>
                </div>

                <!-- 产品卡片2 -->
                <div class="product-card rounded-xl p-4">
                    <div class="flex items-center mb-3">
                        <img src="https://via.placeholder.com/80x80/059669/FFFFFF?text=张家界" alt="张家界四日游" class="w-20 h-20 rounded-lg mr-4">
                        <div class="flex-1">
                            <div class="font-semibold text-gray-800 mb-1">张家界四日游</div>
                            <div class="text-sm text-gray-500 mb-2">包含：住宿+门票+餐饮</div>
                            <div class="flex items-center space-x-4">
                                <span class="text-lg font-bold text-red-600">¥899</span>
                                <span class="text-sm text-gray-400 line-through">¥1,199</span>
                                <span class="season-low text-white px-2 py-1 rounded text-xs">淡季</span>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div class="text-center bg-green-50 rounded-lg p-2">
                            <div class="text-green-600 font-bold">成交员佣金</div>
                            <div class="text-green-800">5% (¥44.95)</div>
                        </div>
                        <div class="text-center bg-blue-50 rounded-lg p-2">
                            <div class="text-blue-600 font-bold">分销员佣金</div>
                            <div class="text-blue-800">8% (¥71.92)</div>
                        </div>
                    </div>
                    <div class="flex space-x-2 mt-3">
                        <button class="flex-1 bg-blue-500 text-white py-2 rounded-lg text-sm" onclick="editProduct('张家界四日游')">
                            <i class="fas fa-edit mr-1"></i>编辑
                        </button>
                        <button class="flex-1 bg-green-500 text-white py-2 rounded-lg text-sm" onclick="viewStats('张家界四日游')">
                            <i class="fas fa-chart-line mr-1"></i>数据
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 产品上传表单弹窗 -->
    <div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="bg-white rounded-2xl p-6 w-full max-w-md max-h-screen overflow-y-auto">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-bold text-gray-800">上传新产品</h3>
                    <button onclick="hideUploadForm()" class="text-gray-500">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <!-- 产品基本信息 -->
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">产品名称</label>
                        <input type="text" id="productName" placeholder="请输入产品名称" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">产品描述</label>
                        <textarea id="productDesc" placeholder="请输入产品描述" rows="3"
                                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"></textarea>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">基础价格</label>
                            <input type="number" id="basePrice" placeholder="0.00" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">产品类型</label>
                            <select id="productType" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                <option value="">选择类型</option>
                                <option value="scenic">景点游</option>
                                <option value="hotel">酒店</option>
                                <option value="package">套餐</option>
                                <option value="transport">交通</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- 佣金设置 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">佣金设置</label>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">成交员佣金(%)</label>
                                <input type="number" id="salesmanCommission" placeholder="6" min="0" max="100" step="0.1"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                            </div>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">分销员佣金(%)</label>
                                <input type="number" id="distributorCommission" placeholder="10" min="0" max="100" step="0.1"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                            </div>
                        </div>
                    </div>
                    
                    <!-- 图片上传 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">产品图片</label>
                        <div class="upload-area rounded-lg p-6 text-center cursor-pointer" onclick="triggerFileUpload()">
                            <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
                            <div class="text-gray-600">点击上传或拖拽图片到此处</div>
                            <div class="text-sm text-gray-400 mt-1">支持 JPG、PNG 格式，最大 5MB</div>
                            <input type="file" id="productImages" multiple accept="image/*" class="hidden" onchange="handleFileUpload(event)">
                        </div>
                        <div id="imagePreview" class="mt-3 grid grid-cols-3 gap-2 hidden"></div>
                    </div>
                    
                    <!-- 季节性设置 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">季节性设置</label>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" id="seasonalPricing" class="mr-2">
                                <span class="text-sm">启用季节性定价</span>
                            </label>
                            <div id="seasonalSettings" class="hidden bg-gray-50 rounded-lg p-3">
                                <div class="grid grid-cols-3 gap-2 text-xs">
                                    <div class="text-center">
                                        <div class="font-medium text-red-600">旺季倍数</div>
                                        <input type="number" value="1.5" step="0.1" class="w-full mt-1 px-2 py-1 border rounded">
                                    </div>
                                    <div class="text-center">
                                        <div class="font-medium text-blue-600">平季倍数</div>
                                        <input type="number" value="1.0" step="0.1" class="w-full mt-1 px-2 py-1 border rounded">
                                    </div>
                                    <div class="text-center">
                                        <div class="font-medium text-green-600">淡季倍数</div>
                                        <input type="number" value="0.8" step="0.1" class="w-full mt-1 px-2 py-1 border rounded">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="flex space-x-3 mt-6">
                    <button class="flex-1 bg-gray-200 text-gray-800 py-3 rounded-lg font-medium" onclick="hideUploadForm()">
                        取消
                    </button>
                    <button class="flex-1 bg-purple-600 text-white py-3 rounded-lg font-medium" onclick="submitProduct()">
                        上传产品
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        /**
         * 显示产品上传表单
         */
        function showUploadForm() {
            document.getElementById('uploadModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        /**
         * 隐藏产品上传表单
         */
        function hideUploadForm() {
            document.getElementById('uploadModal').classList.add('hidden');
            document.body.style.overflow = 'auto';
            // 清空表单
            document.getElementById('productName').value = '';
            document.getElementById('productDesc').value = '';
            document.getElementById('basePrice').value = '';
            document.getElementById('productType').value = '';
            document.getElementById('salesmanCommission').value = '';
            document.getElementById('distributorCommission').value = '';
            document.getElementById('productImages').value = '';
            document.getElementById('imagePreview').classList.add('hidden');
            document.getElementById('seasonalPricing').checked = false;
            document.getElementById('seasonalSettings').classList.add('hidden');
        }
        
        /**
         * 触发文件上传
         */
        function triggerFileUpload() {
            document.getElementById('productImages').click();
        }
        
        /**
         * 处理文件上传
         * @param {Event} event - 文件选择事件
         */
        function handleFileUpload(event) {
            const files = event.target.files;
            const preview = document.getElementById('imagePreview');
            
            if (files.length > 0) {
                preview.innerHTML = '';
                preview.classList.remove('hidden');
                
                Array.from(files).forEach((file, index) => {
                    if (index < 6) { // 最多显示6张图片
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const img = document.createElement('div');
                            img.className = 'relative';
                            img.innerHTML = `
                                <img src="${e.target.result}" class="w-full h-20 object-cover rounded-lg">
                                <button class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs" onclick="removeImage(this)">
                                    <i class="fas fa-times"></i>
                                </button>
                            `;
                            preview.appendChild(img);
                        };
                        reader.readAsDataURL(file);
                    }
                });
            }
        }
        
        /**
         * 移除图片
         * @param {Element} button - 删除按钮
         */
        function removeImage(button) {
            button.parentElement.remove();
            const preview = document.getElementById('imagePreview');
            if (preview.children.length === 0) {
                preview.classList.add('hidden');
            }
        }
        
        /**
         * 提交产品信息
         */
        function submitProduct() {
            const productName = document.getElementById('productName').value;
            const productDesc = document.getElementById('productDesc').value;
            const basePrice = document.getElementById('basePrice').value;
            const productType = document.getElementById('productType').value;
            const salesmanCommission = document.getElementById('salesmanCommission').value;
            const distributorCommission = document.getElementById('distributorCommission').value;
            
            if (!productName || !productDesc || !basePrice || !productType) {
                alert('请填写完整的产品信息');
                return;
            }
            
            if (!salesmanCommission || !distributorCommission) {
                alert('请设置佣金比例');
                return;
            }
            
            alert(`产品 "${productName}" 上传成功！\n\n基础价格：¥${basePrice}\n成交员佣金：${salesmanCommission}%\n分销员佣金：${distributorCommission}%`);
            hideUploadForm();
            // 实际项目中调用上传API
        }
        
        /**
         * 显示佣金设置
         */
        function showCommissionSettings() {
            alert('佣金设置功能\n\n可以统一调整所有产品的佣金比例，或者按产品类型设置不同的佣金标准。');
            // 实际项目中打开佣金设置页面
        }
        
        /**
         * 显示季节设置
         */
        function showSeasonSettings() {
            alert('淡旺季设置功能\n\n可以设置不同时间段的价格倍数和佣金比例，系统会自动根据当前日期应用相应的定价策略。');
            // 实际项目中打开季节设置页面
        }
        
        /**
         * 显示产品列表
         */
        function showProductList() {
            alert('产品列表功能\n\n查看所有产品的详细信息，包括价格、佣金、销售数据等。');
            // 实际项目中跳转到产品列表页面
        }
        
        /**
         * 编辑季节设置
         * @param {string} season - 季节类型
         */
        function editSeason(season) {
            const seasonNames = {
                'high': '旺季',
                'normal': '平季',
                'low': '淡季'
            };
            alert(`编辑${seasonNames[season]}设置`);
            // 实际项目中打开季节编辑表单
        }
        
        /**
         * 编辑产品
         * @param {string} productName - 产品名称
         */
        function editProduct(productName) {
            alert(`编辑产品：${productName}`);
            // 实际项目中打开产品编辑页面
        }
        
        /**
         * 查看产品统计
         * @param {string} productName - 产品名称
         */
        function viewStats(productName) {
            alert(`查看 ${productName} 的销售数据和统计信息`);
            // 实际项目中跳转到产品统计页面
        }
        
        /**
         * 页面加载完成后的初始化
         */
        document.addEventListener('DOMContentLoaded', function() {
            // 监听季节性定价复选框
            document.getElementById('seasonalPricing').addEventListener('change', function() {
                const settings = document.getElementById('seasonalSettings');
                if (this.checked) {
                    settings.classList.remove('hidden');
                } else {
                    settings.classList.add('hidden');
                }
            });
            
            // 拖拽上传功能
            const uploadArea = document.querySelector('.upload-area');
            
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.classList.add('dragover');
            });
            
            uploadArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                this.classList.remove('dragover');
            });
            
            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                this.classList.remove('dragover');
                
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    document.getElementById('productImages').files = files;
                    handleFileUpload({ target: { files: files } });
                }
            });
            
            console.log('产品管理页面加载完成');
        });
    </script>
</body>
</html>